<template>
    <view class="square_components_contacts">
        <!-- <div class="tabs_div">
            <div class="tab">地区<text class="icon-font-basic icon-b-arrow-4-3"></text></div>
            <div class="tab">标签<text class="icon-font-basic icon-b-arrow-4-3"></text></div>
            <div class="tab">性别<text class="icon-font-basic icon-b-arrow-4-3"></text></div>
        </div> -->
        <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="true" :fixed="false"
            :show-loading-more-no-more-view="false" :refresher-theme-style="'white'">
            <div class="lis_box">
                <div class="li" v-for="(li,key) in list" :key="key">
                    <div class="name"><span class="xin" v-if="li.isActive==0">新</span>{{ li.nickName }}</div>
                    <div class="img">
                        <pub-image class="headimg" :src="li.avatar"></pub-image>
                        <div class="span">Lv.{{ li.grade }}</div>
                    </div>
                    <div class="btn" v-if="li.isAdd">已加</div>
                    <div class="btn" v-else @click="toAdd(li,key)">加TA</div>
                    <div class="txt">剩余 {{ li.waitAccrueNum }} 次</div>
                </div>
            </div>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            isLoad: false,

            search: {}
        };
    },
    onLoad() {

    },
    mounted() { },
    methods: {
        getZpagingList(type, data) {
            switch (type) {
                case 'init':
                    if (!this.isLoad) {
                        this.isLoad = true;
                        this.$comFun.openLoading();
                        this.$refs.Zpaging.reload();
                    }
                    break;
                case 'reload':
                    this.search = data;
                    this.$refs.Zpaging.reload();
                    break;
                default:
                    break;
            }
        },
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: 30,
                ...this.search
            };
            const res = await this.$request.get('quan/searchConnections', data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.map(li => {
                    return {
                        ...li,
                        isAdd: false
                    }
                }));
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async toAdd(info, key) {
            this.$emit("openAddAlert", {
                info, key
            })
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/square.scss";
</style>
